import React, { Component, createRef } from 'react'

export default class TextArea extends Component {


    constructor() {
        super()
        this.txtRef = createRef()
    }

    state = {
        flag: false
    }
    handlerClick = () => {
        this.setState((preState) => ({ flag: !preState.flag }), () => {
            // alert('xxx')
            console.log(this.txtRef.current)
            if (this.txtRef.current) {
                this.txtRef.current.style.color = 'red'
                this.txtRef.current.focus()
            }
        })
    }
    render () {
        const { flag } = this.state
        return (
            <>
                <div>TextArea</div>

                <button onClick={this.handlerClick}>点击</button>

                {flag && <textarea name="" id="" cols="30" rows="10" ref={this.txtRef} ></textarea>}
                <hr />

                {flag ? <textarea name="" id="" cols="30" rows="10"></textarea> : null}

            </>

        )
    }
}
